<template>
	<view class="container">
		<view class="grid-body">
			<uni-grid :column="5" :showBorder="false" >
				<uni-grid-item v-for="(item,index) in workList" :index="index" :key="index" class="gridView">
					<view class="grid-item-box" @click="clickGridItem(item)">
						<view class="imgView" ><image :src="item.imgUrl"></image></view>
						<text class="text">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
			workList:[
				{
					naviUrl: '/pages/work/datacenter/index',
					imgUrl:'/static/images/datacenter.png',
					text:'身心健康'
				},
				{
					naviUrl: '/pages/work/teach/index',
					imgUrl:'/static/images/teach.png',
					text:'近视防控'
				},{
					naviUrl: '/pages/work/exam/index',
					imgUrl:'/static/images/exam.png',
					text:'脊柱侧弯'
				},
				{
					naviUrl: '',
					imgUrl:'/static/images/user.png',
					text:'运动安全'
				},
				{
					naviUrl: '',
					imgUrl:'/static/images/teach.png',
					text:'爱国教育'
				}
			]
				
			}
		},
		methods: {
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			clickGridItem(e) {
				this.$tab.navigateTo(e.naviUrl)
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: calc(100vw - 60rpx);
		margin: 20rpx auto;
	}
	.grid-body{
		background-color: #fff;
		box-shadow: 0rpx 4rpx 60rpx 10rpx rgba(156,193,220,0.25);
		border-radius: 20rpx;
		padding: 40rpx 0;
		.gridView {
			font-size: 24rpx;
			.grid-item-box {
					flex: 1;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.imgView{
						width: 100rpx;
						height: 100rpx;
						background: #FF9A50;
						border-radius: 20rpx;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: column;
						align-items: center;
						justify-content: center;
						image{
							width: 60rpx;
							height: 60rpx;
						}
					}
					.text{
						line-height: 60rpx;
						color: #5E5E5E;
					}
				}
			}
		}
</style>